<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="学生姓名">
                <el-input v-model="student.name"/>
            </el-form-item>
            <el-form-item label="学生年龄">
                <el-input-number v-model="student.age"/>
            </el-form-item>
            <el-form-item label="学生性别">
                <el-select v-model="student.sex" placeholder="请选择">
                    <el-option :value="1" label="男"/>
                    <el-option :value="2" label="女"/>
                </el-select>
            </el-form-item>
            <el-form-item label="学生简介">
                <el-input v-model="student.intro" :rows="5" type="textarea"/>
            </el-form-item>
            <el-form-item label="学生爱好">
                <el-input v-model="student.hobby" :rows="5" type="textarea"/>
            </el-form-item>
            <el-form-item label="学生住址">
                <el-input v-model="student.address"/>
            </el-form-item>

            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import student from '@/api/edu/student'

export default {
    data() {
        return {
            student:{
                name: '',
                age: 0,
                sex: 0,
                intro: '',
                hobby: '',
                address: ''
            },
            BASE_API: process.env.BASE_API, //获取dev.env.js里面地址
            saveBtnDisabled: false  //保存按钮是否禁用
        }
    },
    created() { //页面渲染之前执行
        this.init()
    },
    watch: {  //监听
        $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
        this.init()
        }
    },
    methods: {
        init() {
            //判断url如果有id值，做修改操作
            if (this.$route.params && this.$route.params.id) {
                //从路径获取id值
                const id = this.$route.params.id
                //调用根据id查询学生的方法
                this.findStudentById(id)
            } else { //url如果没有id值，做添加操作
                //清空表单
                this.student = {}
            }
        },
        //根据id查询学生
        findStudentById(id) {
            student.findStudentById(id)
                .then(response => {
                    this.student = response.data
                })
        },
        //判断修改还是添加
        saveOrUpdate() {
            //根据student是否有id判断，有id则是修改，没有id则是添加
            if (!this.student.id) { //添加学生
                this.saveStudent()
            } else { //修改学生
                this.updateStudentById()
            }
        },
        //新增学生
        saveStudent() {
            console.log(this.student)
            student.saveStudent(this.student)
                .then(response => {
                    this.$message({
                        type: 'success',
                        message: '添加成功！'
                    })
                    //回到学生列表页面，路由跳转
                    this.$router.push({path: '/student/table'})
                })
        },
        //根据id修改学生
        updateStudentById() {
            console.log(this.student)
            student.updateStudentById(this.student)
                .then(response => {
                    this.$message({
                        type: 'success',
                        message: '修改成功！'
                    })
                    //回到学生列表页面，路由跳转
                    this.$router.push({path: '/student/table'})
                })
        }
    }
}
</script>
